﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Js/Jquery/core/jquery.core.js"></script>
    <script src="../../Js/Jquery/ui/jquery.ui.js"></script>
    <script src="../../Js/Jquery/core/jquery.core.extend.js"></script>
    <link href="../../Css/Jquery/ui/default.css" rel="stylesheet" />
    <link href="../../Css/Jquery/plugins/jquery.jshowoff.css" rel="stylesheet" />
    <script src="../../Js/Jquery/plugins/jquery.jshowoff.js"></script>

    <link href="../../Css/Core/CBase.css" rel="stylesheet" />

    <script>
        $(function () {
            $(".main-navigation ul.nav-top > li").hover(function () {
                var bgColor = "background-" + $(this).attr("color");
                $(this).addClass(bgColor);
            }, function () {
                var bgColor = "background-" + $(this).attr("color");
                $(this).removeClass(bgColor);
            });
            $('#Gift-Slider').jshowoff({
                animatePause: false,
                autoPlay: false,
                changeSpeed: 2000,
                controls: false,
                controlText: {
                    play: 'Play',
                    pause: 'Pause',
                    next: 'Next',
                    previous: 'Previous'
                },
                effect: 'random',
                hoverPause: false,
                links: true,
                speed: 5000
            });
        });
    </script>
    <style>
        body {
            overflow-x: hidden;
        }

        .main-container {
            width: 1000px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        .main-header {
            overflow: hidden;
            position: relative;
        }

        .main-user {
            padding: 0;
            margin: 0;
            margin-top: 68px;
            list-style: none;
            overflow: hidden;
            height: 28px;
            background: url(../../Images/img.bg/star-blue.png) left center no-repeat;
        }

            .main-user li {
                float: left;
                font-size: 18px;
                margin-left: 10px;
            }

                .main-user li a {
                    text-decoration: none;
                    color: #363636;
                    line-height: 32px;
                }

                    .main-user li a:hover {
                        color: #7ACCC8;
                    }

            .main-user .user-login {
                margin-left: 28px;
            }

            .main-user .user-register {
            }

        .main-navigation {
            overflow: hidden;
        }

            .main-navigation ul {
                padding: 0;
                margin: 0;
                list-style: none;
                overflow: hidden;
                margin-left: 82px;
            }

                .main-navigation ul.nav-top > li {
                    float: left;
                    margin-left: 40px;
                    overflow: hidden;
                    border: solid 5px #FFF;
                }

                    .main-navigation ul.nav-top > li:first-child {
                        margin-left: 0;
                    }

                    .main-navigation ul.nav-top > li a {
                        padding-top: 10px;
                        color: #363636;
                        text-decoration: none;
                        font-size: 21px;
                    }

                    .main-navigation ul.nav-top > li > div {
                        margin-bottom: 10px;
                    }

                    .main-navigation ul.nav-top > li .border-pink {
                        border-top: solid 5px #EC008C;
                    }

                    .main-navigation ul.nav-top > li .border-blue {
                        border-top: solid 5px #25AAE1;
                    }

                    .main-navigation ul.nav-top > li .border-orange {
                        border-top: solid 5px #F7941E;
                    }

                    .main-navigation ul.nav-top > li .border-violet {
                        border-top: solid 5px #975CA6;
                    }

                    .main-navigation ul.nav-top > li .border-green {
                        border-top: solid 5px #8CC63F;
                    }

        .main-separator {
            margin-top: 10px;
            overflow: hidden;
        }

            .main-separator ul {
                padding: 0;
                margin: 0;
                overflow: hidden;
                list-style: none;
            }

                .main-separator ul li {
                    float: left;
                    height: 10px;
                }

                    .main-separator ul li.separator-pink {
                        width: 35px;
                        background-color: #EC008C;
                    }

                    .main-separator ul li.separator-blue {
                        width: 195px;
                        background-color: #25AAE1;
                    }

                    .main-separator ul li.separator-orange {
                        width: 630px;
                        background-color: #F7941E;
                    }

                    .main-separator ul li.separator-violet {
                        width: 43px;
                        background-color: #975CA6;
                    }

                    .main-separator ul li.separator-green {
                        width: 27px;
                        background-color: #8CC63F;
                    }

        .background-pink {
            background-color: #EC008C;
            border: solid 5px #FFA2D9 !important;
            border-bottom: 0 !important;
        }

        .background-blue {
            background-color: #25AAE1;
            border: solid 5px #BAE5F6 !important;
            border-bottom: 0 !important;
        }

        .background-orange {
            background-color: #F7941E;
            border: solid 5px #FFE9CC !important;
            border-bottom: 0 !important;
        }

        .background-violet {
            background-color: #975CA6;
            border: solid 5px #D6BFDC !important;
            border-bottom: 0 !important;
        }

        .background-green {
            background-color: #8CC63F;
            border: solid 5px #D4EAB7 !important;
            border-bottom: 0 !important;
        }



        #Gift-Slider {
            position: relative;
            overflow: hidden;
            width: 1000px;
            height: 341px;
            -webkit-border-top-left-radius: 6px;
            -webkit-border-top-right-radius: 6px;
            -moz-border-radius-topleft: 6px;
            -moz-border-radius-topright: 6px;
        }

        .gift-name {
            font-size: 65px;
            position: absolute;
            padding: 0;
            margin: 0;
            color: #f26522;
            font-family: Arial;
            font-weight: bold;
        }

        .gift-body {
            position: absolute;
            top: 100px;
            width: 300px;
            font-family: Arial;
        }


        .gift-description {
            font-size: 20px;
            text-align: justify;
        }

            .gift-description * {
                font-family: Arial;
            }

        .gift-description-focus {
            font-weight: bold;
        }

        .gift-description div {
        }

        .gift-detail {
            text-align: right;
        }

            .gift-detail a {
                font-size: 20px;
                font-style: italic;
            }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="main-header">
            <div class="cssFloatLeft">
                <img src="../../Images/img.bg/logo.png" style="margin-left: 50px;" />
            </div>
            <div class="cssFloatRight">
                <ul class="main-user">
                    <li><a href="javascript:void(0)" class="user-login">Đăng nhập</a></li>
                    <li><a href="javascript:void(0)">|</a></li>
                    <li><a href="javascript:void(0)" class="user-register">Đăng ký</a></li>
                </ul>
            </div>
        </div>
        <div class="cssClearBoth" style="position: relative; overflow: hidden;">
            <div id="Gift-Slider">
                <div class="jshowoff-item">
                    <img src="../../Uploads/images/Gift/ipad2012.png" alt="Shore" class="eddie" />
                    <h2 class="gift-name">CLICK 2 IPAD</h2>
                    <div class="gift-body">
                        <div class="gift-description">
                            <div>
                                Một thao tác click đơn giản để tham gia ngay khảo sát ngắn thú vị.
                            </div>
                            <div class="gift-description-focus">
                                Rinh Ipad ngay về nhà nhé!
                            </div>
                        </div>
                        <div class="gift-detail">
                            <a href="javascript:void(0);">Chi tiết &#8250;</a>
                        </div>
                    </div>
                </div>
                <div class="jshowoff-item">
                    <img src="../../Uploads/images/Gift/nemo.jpg" alt="Eddie" class="eddie" />
                    <h2 class="gift-name">CLICK 2 IPAD</h2>
                    <div class="gift-body">
                        <div class="gift-description">
                            <div>
                                Một thao tác click đơn giản để tham gia ngay khảo sát ngắn thú vị.
                            </div>
                            <div class="gift-description-focus">
                                Rinh Ipad ngay về nhà nhé!
                            </div>
                        </div>
                        <div class="gift-detail">
                            <a href="javascript:void(0);">Chi tiết &#8250;</a>
                        </div>
                    </div>
                </div>
                <div class="jshowoff-item">
                    <img src="../../Uploads/images/Gift/toystory.jpg" alt="Flower" class="eddie" />
                    <h2 class="gift-name">CLICK 2 IPAD</h2>
                    <div class="gift-body">
                        <div class="gift-description">
                            <div>
                                Một thao tác click đơn giản để tham gia ngay khảo sát ngắn thú vị.
                            </div>
                            <div class="gift-description-focus">
                                Rinh Ipad ngay về nhà nhé!
                            </div>
                        </div>
                        <div class="gift-detail">
                            <a href="javascript:void(0);">Chi tiết &#8250;</a>
                        </div>
                    </div>
                </div>
                <div class="jshowoff-item">
                    <img src="../../Uploads/images/Gift/up.jpg" alt="Fern" class="eddie" />
                    <h2 class="gift-name">CLICK 2 IPAD</h2>
                    <div class="gift-body">
                        <div class="gift-description">
                            <div>
                                Một thao tác click đơn giản để tham gia ngay khảo sát ngắn thú vị.
                            </div>
                            <div class="gift-description-focus">
                                Rinh Ipad ngay về nhà nhé!
                            </div>
                        </div>
                        <div class="gift-detail">
                            <a href="javascript:void(0);">Chi tiết &#8250;</a>
                        </div>
                    </div>
                </div>
                <div class="jshowoff-item">
                    <img src="../../Uploads/images/Gift/walle.jpg" alt="Fern" class="eddie" />
                    <h2 class="gift-name">CLICK 2 IPAD</h2>
                    <div class="gift-body">
                        <div class="gift-description">
                            <div>
                                Một thao tác click đơn giản để tham gia ngay khảo sát ngắn thú vị.
                            </div>
                            <div class="gift-description-focus">
                                Rinh Ipad ngay về nhà nhé!
                            </div>
                        </div>
                        <div class="gift-detail">
                            <a href="javascript:void(0);">Chi tiết &#8250;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-navigation cssClearBoth">
            <ul class="nav-top">
                <li class="nav-pink" color="pink">
                    <div class="border-pink"></div>
                    <a href="javascript:void(0)">CAFE
                    <br />
                        THỊ TRƯỜNG</a></li>
                <li class="nav-blue" color="blue">
                    <div class="border-blue"></div>
                    <a href="javascript:void(0)">TOP 10
                    <br />
                        SẢN PHẨM</a></li>
                <li class="nav-orange" color="orange">
                    <div class="border-orange"></div>
                    <a href="javascript:void(0)">BÌNH CHỌN<br />
                        6 SAO</a></li>
                <li class="nav-violet" color="violet">
                    <div class="border-violet"></div>
                    <a href="javascript:void(0)">THAM GIA<br />
                        KHẢO SÁT</a></li>
                <li class="nav-green" color="green">
                    <div class="border-green"></div>
                    <a href="javascript:void(0)">SỐNG KHỎE<br />
                        ĐẸP VUI</a></li>
            </ul>
        </div>
        <div class="main-separator cssClearBoth">
            <ul>
                <li class="separator-pink"></li>
                <li class="separator-blue"></li>
                <li class="separator-orange"></li>
                <li class="separator-violet"></li>
                <li class="separator-green"></li>
            </ul>
        </div>
    </div>

</body>
</html>
